<script setup lang="ts">
import {Map, View, Feature,} from "ol";
import * as control from 'ol/control';
import * as coordinate from 'ol/coordinate';
// import * as geom from 'ol/geom';
// import * as proj from 'ol/proj';
import TileLayer from "ol/layer/Tile";
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Draw from 'ol/interaction/Draw'
import {XYZ} from "ol/source";
import {onMounted, ref} from "vue";
import {ScaleLine} from "ol/control";
import { fromLonLat, transform } from "ol/proj";
import { Polygon} from "ol/geom";
import { Style, Icon ,Stroke, Fill, Circle} from "ol/style";

import html2canvas from "html2canvas";

const map = ref(null) // 存放地图实例
const mousePositionTxt = ref([102.064839, 24.548857])
const currentCoordinate = ref([102.064839, 24.548857])
const scaleLineControl = ref(null) //比例尺
let coordinateSign = ref(0) //是否显示经纬度
const tool = ref('Polygon')
let points = ref(null)
type Props ={
  taskPoints: []
  taskPatch: []
  taskId: number
}
let propsTask = defineProps<Props>()
// 1.跟随鼠标移动显示相应经纬度（control.MousePosition)。2.显示比例尺(scaleLineControl)。3.通过TabIndex实现地图激活。4.使用多边形绘制区域并返回相应经纬度坐标(绘制：首先新建一个绘制层vector，然后通过new Draw创建绘制类。通过map.addInteraction等相关方法实现绘制操作。获取点坐标：需要在drawPoly方法中，获取点坐标（否则存在获取不到点的现象，即识别不了draw.value.on() ）。一次绘制只能获取当前图形的完整坐标（不能同时获取上一次获取到的坐标）。这里做完善的话，可以将每次产生的坐标存在本地。最后再统一返回。

const sourceDraw = new SourceVector({
  wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
  //可参考这个 https://blog.csdn.net/GISuuser/article/details/80690589#:~:text=%E6%9C%80%E7%BB%88%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF%BC%9A%20%E7%BB%99%E5%9C%B0%E5%9B%BE%E7%9A%84%E6%AF%8F%E4%B8%80%E4%B8%AAlayer%E8%AE%BE%E7%BD%AEextent%EF%BC%9B,Openlayers%E4%B8%8B%E7%9A%84%E6%AF%8F%E4%B8%80%E4%B8%AA%E5%9B%BE%E5%B1%82%E5%9F%BA%E7%B1%BB%E9%83%BD%E7%BB%A7%E6%89%BF%E4%BA%86%E8%BF%99%E4%B8%AA%E6%8E%A5%E5%8F%A3%EF%BC%8C%E8%AE%BE%E7%BD%AEsetExtent%20%5B-180%2C-90%2C180%2C90%5D%EF%BC%8C%E4%B9%8B%E5%90%8E%E6%9C%89%E6%95%88%E7%9A%84%E8%A7%A3%E5%86%B3%E4%BA%86%E5%9C%B0%E5%9B%BE%E5%9B%BE%E5%B1%82%E9%87%8D%E5%A4%8D%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98
})

function initMap () {
  scaleLineControl.value = new control.ScaleLine()//默认是 米制单位
  // 地图实例
  map.value = new Map({
    target: 'map1',                         // 对应页面里 id 为 map1 的元素
    layers: [                              // 图层
      new TileLayer({
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f0205b3015ed23553ee037f6ecac9b19",
          crossOrigin: "anonymous",
          wrapX: false
        }),
        preload: Infinity,//底图预加载。减少缩放时出现的空白区域。
      }),
      new TileLayer({
        source: new XYZ({
          url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=f0205b3015ed23553ee037f6ecac9b19",
          crossOrigin: "anonymous",
          wrapX: false
        }),
        preload: Infinity,
      }),
      // vectorLayer,


    ],
    view: new View({                       // 地图视图
      projection: "EPSG:4326",             // 坐标系，有EPSG:4326和EPSG:3857
      // center: [102.064839, 24.548857],     // 后续改成 taskPatch
      minZoom: 2,// 地图缩放最小级别
      maxZoom: 18,//同时设置这两个值（min、maxZoom）之后，就能够限制缩放
      center: [116.46, 39.92],
      zoom: 16                     // 值越大，地图精度越大
    }),
    controls: control.defaults().extend([
      new ScaleLine({
        Units: 'metric',
        target: document.getElementById('scale')
      }),
      // scaleLineControl.value, // 比例尺

      new control.MousePosition({
        coordinateFormat: coordinate.createStringXY(4),
        projection: 'EPSG:4326',
        target: mousePositionTxt.value
      })
    ])
  })
}
  // addpolygon()


onMounted(() => {
  initMap()
})


function showCoordinate(){
  coordinateSign.value = 1
}


// 导出 -> 这个是按钮的导出按钮的触发事件

// 下载

</script>

<template>
  <div class="flex w-full gap-1">
    <div id="map1" tabindex="2" class="map1__x grow h-full
    bg-#84b9bf relative" @click="showCoordinate">
<!--      如果没有 z， 那么这两个东西会被叠在下面-->
      <div class="absolute bottom-1 left-1 h-9 bg-white z-11 flex rounded-lg flex justify-center items-center px-2"><p>1:</p><p class="w-14" id="scale"></p></div>
      <div class="absolute z-10 w-50 h-9 bg-white rounded-lg px-2  bottom-1 right-1 flex justify-start items-center" ref="mousePositionTxt" v-show="coordinateSign==1">经纬度：</div>
    </div>
    <div class="bg-white w-80 flex flex-col justify-center items-center">
      <div>用于地区信息展示</div>
      <div>{{taskId}}</div>
      <div>{{propsTask.taskPoints}}</div>
      <button @click="exportAction">截图</button>
    </div>
  </div>


</template>

<style scoped>

</style>